<template>
  <div class="version-control-container">
    <div class="header">
      <div class="title">策略版本控制</div>
      <div class="actions">
        <el-select v-model="selectedStrategy" placeholder="选择策略" size="small">
          <el-option 
            v-for="strategy in strategies" 
            :key="strategy.id"
            :label="strategy.name"
            :value="strategy.id"
          />
        </el-select>
        <el-button type="primary" size="small" @click="backupCurrentVersion">备份当前版本</el-button>
      </div>
    </div>

    <div class="version-list">
      <div v-for="version in versions" :key="version.id" class="version-item">
        <div class="version-tag">
          <span class="tag">v{{ version.version }}</span>
          <span class="description">{{ version.description }}</span>
        </div>
        <div class="version-info">
          <span class="time">{{ version.time }} - {{ version.author }}</span>
          <div class="actions">
            <el-button type="primary" size="small" plain @click="viewVersion(version)">查看</el-button>
            <el-button type="primary" size="small" plain @click="compareVersion(version)">对比</el-button>
            <el-button type="success" size="small" @click="restoreVersion(version)">还原</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 版本对比部分 -->
    <div v-if="showComparison" class="version-comparison">
      <div class="comparison-header">
        <div class="title">版本对比</div>
      </div>
      <div class="comparison-content">
        <div class="comparison-selects">
          <div class="select-group">
            <span class="label">对比目标</span>
            <el-select v-model="compareSource" placeholder="v2.5 (当前版本)" size="small">
              <el-option
                v-for="version in versions"
                :key="version.id"
                :label="'v' + version.version + (version.isCurrent ? ' (当前版本)' : '')"
                :value="version.version"
              />
            </el-select>
          </div>
          <div class="select-group">
            <span class="label">对比基准</span>
            <el-select v-model="compareTarget" placeholder="选择版本" size="small">
              <el-option
                v-for="version in versions"
                :key="version.id"
                :label="'v' + version.version"
                :value="version.version"
              />
            </el-select>
          </div>
        </div>
        <div class="code-comparison">
          <div class="code-block source">
            <pre><code>{{ sourceCode }}</code></pre>
          </div>
          <div class="code-block target">
            <pre><code>{{ targetCode }}</code></pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VersionControl',
  props: {
    currentStrategy: {
      type: String,
      default: ''
    }
  },
  watch: {
    currentStrategy: {
      immediate: true,
      handler(val) {
        if (val) {
          this.selectedStrategy = val
          this.loadVersions()
        }
      }
    }
  },
  data() {
    return {
      selectedStrategy: '',
      showComparison: false,
      compareSource: '',
      compareTarget: '',
      versions: [
        {
          id: 1,
          version: '2.5',
          description: '优化止损逻辑，增加动态移动止损',
          time: '2025-05-20 14:32:15',
          author: '管理员',
          isCurrent: true
        },
        {
          id: 2,
          version: '2.4',
          description: '调整参数: MA(15,50), 止损:2%, 止盈:5%',
          time: '2025-05-18 09:45:22',
          author: '管理员'
        },
        {
          id: 3,
          version: '2.3',
          description: '增加波动率过滤器，避免大波动期间交易',
          time: '2025-05-15 16:20:08',
          author: '管理员'
        },
        {
          id: 4,
          version: '2.2',
          description: '优化交易时间窗口，避开低流动性时段',
          time: '2025-05-10 11:08:45',
          author: '管理员'
        },
        {
          id: 5,
          version: '2.1',
          description: '增加RSI过滤条件，改进进场信号',
          time: '2025-05-05 15:32:40',
          author: '管理员'
        },
        {
          id: 6,
          version: '2.0',
          description: '主要版本升级: 重构策略逻辑，引入多指标组合',
          time: '2025-04-28 09:15:30',
          author: '管理员'
        },
        {
          id: 7,
          version: '1.0',
          description: '初始版本: 基础均线交叉策略',
          time: '2025-04-20 11:25:18',
          author: '管理员'
        }
      ],
      sourceCode: 'def check_stop_loss(self):\\n    return True',
      targetCode: 'def check_stop_loss(self):\\n    return False'
    }
  },
  methods: {
    loadVersions() {
      // TODO: 从后端加载对应策略的版本历史
      console.log('Loading versions for strategy:', this.selectedStrategy)
    },
    backupCurrentVersion() {
      this.$message.success('已成功备份当前版本')
    },
    viewVersion(version) {
      this.$emit('view', version)
    },
    compareVersion(version) {
      this.showComparison = true
      this.compareTarget = version.version
      this.compareSource = this.versions.find(v => v.isCurrent).version
    },
    restoreVersion(version) {
      this.$message.success('已成功还原到版本 v' + version.version)
      this.$emit('restore', version)
    }
  }
}
</script>

<style lang="scss" scoped>
.version-control-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }

    .actions {
      display: flex;
      gap: 12px;
      align-items: center;

      .el-select {
        width: 160px;
      }
    }
  }

  .version-list {
    .version-item {
      padding: 16px 0;
      border-bottom: 1px solid #EBEEF5;

      &:last-child {
        border-bottom: none;
      }

      .version-tag {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .tag {
          background: #F0F5FF;
          color: #409EFF;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 13px;
          margin-right: 12px;
        }

        .description {
          color: #303133;
          font-size: 14px;
        }
      }

      .version-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .time {
          color: #909399;
          font-size: 13px;
        }

        .actions {
          display: flex;
          gap: 8px;
        }
      }
    }
  }

  .version-comparison {
    margin-top: 24px;
    border-top: 1px solid #EBEEF5;
    padding-top: 24px;

    .comparison-header {
      margin-bottom: 20px;

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
      }
    }

    .comparison-content {
      .comparison-selects {
        display: flex;
        gap: 24px;
        margin-bottom: 20px;

        .select-group {
          display: flex;
          align-items: center;
          gap: 12px;

          .label {
            color: #606266;
            font-size: 14px;
          }

          .el-select {
            width: 200px;
          }
        }
      }

      .code-comparison {
        display: flex;
        gap: 20px;

        .code-block {
          flex: 1;
          background: #F8F9FA;
          border-radius: 4px;
          padding: 16px;

          pre {
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
            
            code {
              font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
              font-size: 12px;
              line-height: 1.5;
              color: #606266;
            }
          }
        }
      }
    }
  }
}

:deep(.el-button--small) {
  padding: 8px 15px;
}

:deep(.el-button--success) {
  background-color: #67C23A;
  border-color: #67C23A;
  
  &:hover, &:focus {
    background-color: #85ce61;
    border-color: #85ce61;
  }
}
</style> 